
<template>
  <!--调用说明-----帮助
   调用方法：
    < <template slot="empty">
              <HelpTips :helplist="helpList" @handlefunc="handleHelpFunc" />
            </template>
    import HelpTips from '@/views/common/helptips/help'
    HelpTips: { AccountCard },
    :helpList:卡片传入值:
          helpList: [
        { Button: '创建项目分组',
          content: '您可以创建一个新的分组。'

        },
        { Button: '创建项目',
          content: '您可以在当前选择的项目分组下创建一个新的项目。'

        }
      ]
    :
    @handlefunc ：主页面调用的方法名，传递helpList的index设置不同代码
   -->

  <div class="help">
    <div>
      <el-image :src="nothingPic" />
      <div class="text-xl light " style="color:#eee">什么都没有！</div>

      <div class="quick-button">
        <div class="bold grey margin-tb">您可以尝试做这些事：</div>
        <!-- <div v-for="(item,index) in helplist" :key="index">
          <el-button type="text" class="bold" @click="_handleFunc(index)">{{ item.Button }}：</el-button><span class="gray text-sm margin-left-sm">{{ item.content }}</span>
        </div> -->
        <div v-for="(item,index) in helplist" :key="index">
          <el-button type="text" class="bold">{{ item.title }}：</el-button><span class="gray text-sm margin-left-sm">{{ item.content }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // helplist: {
    //   type: Array,
    //   default: function() {
    //     return {}
    //   }
    // },
    pageName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      nothingPic: require('@/assets/chahua/nodata.png'),
      functionList: ['func1', 'func2'],
      helplist: []
    }
  },
  watch: {
    pageName: {
      deep: true,
      handler(val) {
        this.getPageDesc()
      }
    }
  },
  mounted() {
    this.getPageDesc()
  },
  methods: {
    _handleFunc(index) {
      this.$emit('handlefunc', index)
    },
    getPageDesc() {
      this.$axios.get(`${process.env.BASE_URL}pagedesc.json`).then(res => {
        this.helplist = res[this.pageName] || {}
      })
    }
  }
}
</script>

<style scoped>
.quick-button{
    /* width: 50%; */
    text-align: left;
    margin:auto
}
.el-button{
    padding: 5px 0px;
}
.help{
  display: flex;
  flex-direction: column;
  justify-content:center ;
  height: 100%;
  padding:30px 0;
  max-width: 600px;
  margin:auto;
  text-align: center;
}
</style>
